<template>
  <detailbox :title="type == 1 ? '重新编辑' : '新增'" @leftclick="close">
    <div slot="right" class="flex_item flex_end">
      <div v-if="type == 1" class="error error_f f12 ml10 flex_start">
        <i class="f14 el-icon-error"></i>
        未通过原因：不要使用自定义编号和版本号，请使用系统自带的编号版本号，以后就不用麻烦了。
      </div>
      <div class="flex_end">
        <el-button type="success" size="small" @click="addFile" v-if="type == 0">添加新增</el-button>
        <el-button v-if="type == 1" type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情
        </el-button>
        <el-button type="primary" size="small" @click="submit">提交</el-button>
      </div>
    </div>
    <el-row>
      <!-- 表单 -->

      <el-col :span="18">
        <div style="margin-top:10px;" v-for="(form, index) in formList" :key="index" :id="'item'+index">
          <basic-container>
            <div class="main_title success_f flex_between">
              <b>管理信息{{ detailId ? '' : `（${index + 1}）` }}</b>
              <el-button @click="delFile(index)" type="danger" size="small" plain v-if="index != 0">删除</el-button>
            </div>
            <el-divider></el-divider>
            <div class="mb20">
              <span class="index_num success_bg">1</span>
              <b class="f14">基础信息</b>
            </div>
            <el-row>
              <el-form size="mini">
                <el-form-item label="产品UDI管理编号：" required>
                  <el-radio-group v-model="form.fileNumberType">
                    <el-radio :label="0">
                      使用系统编号
                      <el-input class="ml10" readonly v-model="form.fileNumber" placeholder="输入编号" style="width: 90px;">
                      </el-input>
                      <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                        <div class="deepgray_f">系统编号</div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                    </el-radio>
                    <el-radio :label="1">使用自定义编号</el-radio>
                  </el-radio-group>
                  <el-input class="ml10" v-model="form.fileNumber" placeholder="输入编号" style="width: 90px;"></el-input>
                </el-form-item>
                <el-form-item label="数据是否同步上传医疗器械唯一标识数据库：" required>
                  <el-select class="w160" placeholder="请选择" v-model="form.createUser" filterable>
                    <el-option :value="0" label="否"></el-option>
                    <el-option :value="1" label="是"></el-option>
                  </el-select>
                  <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                    <div class="deepgray_f">系统编号</div>
                    <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                  </el-popover>
                </el-form-item>
                <el-form-item label="医疗器械唯一标识编码体系名称：" required>
                  <el-select placeholder="请选择" v-model="form.createUser" filterable>
                    <el-option :value="0" label="GS1"></el-option>
                  </el-select>
                  <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                    <div class="deepgray_f">系统编号</div>
                    <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                  </el-popover>
                </el-form-item>
              </el-form>
            </el-row>

            <div class="f14 mb20" style="margin-top: 40px;">产品标识基本信息</div>
            <div class="border" style="padding: 10px;">
              <el-form size="small">
                <div style="background: #F5F7FA;padding:10px;margin: 10px 0;">
                  <el-form-item label="最小销售单元产品标识编码种类：" required>
                    <el-select placeholder="请选择" v-model="form.createUser" filterable>
                      <el-option :value="0" label="GTIN-13"></el-option>
                      <el-option :value="1" label="GTIN-14"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="最小销售单元产品标识：" required style="margin-bottom: 0;">
                  </el-form-item>
                  <div style="border: 1px solid #C0C6CC;padding: 10px;margin-top: 10px;" v-if="GTIN==14">
                    <el-form size="small" label-position="top">
                      <el-row gutter='20'>
                        <el-col :span="4">
                          <el-form-item label="应用标识符（AI）：" required style="">
                            <div style="display: flex;align-items: center;">
                              <el-select placeholder="请选择" v-model="forms.ppppp" filterable>
                                <el-option :value="0" label="01"></el-option>
                              </el-select>
                              <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                                <div class="deepgray_f">系统编号</div>
                                <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                              </el-popover>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4">
                          <el-form-item label="包装指示符号 ：" required>
                            <div style="display: flex;align-items: center;">
                              <el-select placeholder="请选择" v-model="form.createUser" filterable>
                                <el-option :key='k' v-for="k in 10" :value="k - 1" :label="k - 1"></el-option>
                              </el-select>
                              <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                                <div class="deepgray_f">系统编号</div>
                                <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                              </el-popover>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="医疗器械注册人/备案人识别代码 ：" required>
                            <div style="display: flex;align-items: center;">
                              <el-autocomplete class="inline-input" v-model="form.createUser"
                                :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                              </el-autocomplete>
                              <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                                <div class="deepgray_f">系统编号</div>
                                <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                              </el-popover>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4">
                          <el-form-item label="商品项目编码 ：" required>
                            <div style="display: flex;align-items: center;">
                              <el-input class="ml10" v-model="form.fileNumber" placeholder="输入编号"></el-input>
                              <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                                <div class="deepgray_f">系统编号</div>
                                <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                              </el-popover>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="校验码 ：" required>
                            <div style="display: flex;">
                              <div style="display: flex;align-items: center;">
                                <el-input class="ml10" style="width: 130px;" v-model="form.fileNumber"
                                  placeholder="输入编号"></el-input>
                                <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                                  <div class="deepgray_f">系统编号</div>
                                  <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                                </el-popover>
                              </div>
                              <el-button style="margin-left: 10px;" type="success" plain size='mini'>生成校验码</el-button>
                            </div>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                  </div>

                  <div style="border: 1px solid #C0C6CC;padding: 10px;margin-top: 10px;" v-if="GTIN==13">
                    <el-form size="small" label-position="top">
                      <el-row gutter='20'>
                        <el-col :span="4">
                          <el-form-item label="应用标识符（AI）：" required style="">
                            <div style="display: flex;align-items: center;">
                              <el-select placeholder="请选择" v-model="forms.ppppp" filterable>
                                <el-option :value="0" label="01"></el-option>
                              </el-select>
                              <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                                <div class="deepgray_f">系统编号</div>
                                <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                              </el-popover>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4">
                          <el-form-item label="包装指示符号 ：" required>
                            <div style="display: flex;align-items: center;">
                              <el-select placeholder="请选择" v-model="form.createUser" filterable>
                                <el-option :key='k' v-for="k in 10" :value="k - 1" :label="k - 1"></el-option>
                              </el-select>
                              <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                                <div class="deepgray_f">系统编号</div>
                                <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                              </el-popover>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="医疗器械注册人/备案人识别代码 ：" required>
                            <div style="display: flex;align-items: center;">
                              <el-autocomplete class="inline-input" v-model="form.createUser"
                                :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                              </el-autocomplete>
                              <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                                <div class="deepgray_f">系统编号</div>
                                <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                              </el-popover>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4">
                          <el-form-item label="商品项目编码 ：" required>
                            <div style="display: flex;align-items: center;">
                              <el-input class="ml10" v-model="form.fileNumber" placeholder="输入编号"></el-input>
                              <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                                <div class="deepgray_f">系统编号</div>
                                <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                              </el-popover>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="校验码 ：" required>
                            <div style="display: flex;">
                              <div style="display: flex;align-items: center;">
                                <el-input class="ml10" style="width: 130px;" v-model="form.fileNumber"
                                  placeholder="输入编号"></el-input>
                                <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                                  <div class="deepgray_f">系统编号</div>
                                  <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                                </el-popover>
                              </div>
                              <el-button style="margin-left: 10px;" type="success" plain size='mini'>生成校验码</el-button>
                            </div>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                  </div>
                </div>

                <!-- 最小销售单元中使用单元的数量： -->
                <div style="background: #F5F7FA;padding:10px;margin: 10px 0;">
                  <el-form-item class="" label="最小销售单元中使用单元的数量：" required style="background: #F5F7FA; ">
                    <el-input class="w160" v-model="form.fileNumber" placeholder="输入" style="width: 90px;"></el-input>
                  </el-form-item>
                  <el-form-item label="使用单元的标识是否一致：" required>
                    <el-select placeholder="请选择" class="w160" v-model="form.createUser" filterable>
                      <el-option value="0" label="是"></el-option>
                      <el-option value="1" label="否"></el-option>
                    </el-select>
                  </el-form-item>
                  <div>
                    <el-form-item style="transform: translateX(-10px);">
                      <div style="display: flex;align-items: center;">
                        <div class="flex_center">
                          <el-popover placement="top-start" title="系统编号：" trigger="hover">
                            <div class="deepgray_f">系统编号</div>
                            <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                          </el-popover>
                          <div style="margin-left: 5px;color: #606266;">使用单元产品标识编码种类：</div>
                        </div>
                        <el-select placeholder="请选择" class="w160" v-model="form.createUser" filterable>
                          <el-option value="0" label="GTIN—14"></el-option>
                        </el-select>
                      </div>
                    </el-form-item>
                    <div class="flex_center" style="justify-content: flex-start;">
                      <div style="font-weight: bold;font-size: 14px;color: #606366;">使用单元产品标识：</div>
                      <div style="color: #EC9512;font-size: 14px;margin-left: 10px;">注: 不适用于体外诊断试剂</div>
                    </div>
                    <div style="border: 1px solid #C0C6CC;padding: 10px;margin-top: 10px;margin-bottom: 20px;">
                      <el-form size="small" label-position="top">
                        <el-row gutter='20'>
                          <el-col :span="4">
                            <el-form-item label="应用标识符（AI）：" style="">
                              <div style="display: flex;align-items: center;">
                                <el-select placeholder="请选择" v-model="forms.ppppp" filterable>
                                  <el-option :value="0" label="01"></el-option>
                                </el-select>
                              </div>
                            </el-form-item>
                          </el-col>
                          <el-col :span="4">
                            <el-form-item label="包装指示符号 ：">
                              <div style="display: flex;align-items: center;">
                                <el-select placeholder="请选择" v-model="form.createUser" filterable>
                                  <el-option value="0" label="0"></el-option>
                                </el-select>
                              </div>
                            </el-form-item>
                          </el-col>
                          <el-col :span="6">
                            <el-form-item label="医疗器械注册人/备案人识别代码 ：">
                              <div style="display: flex;align-items: center;">
                                <el-autocomplete class="inline-input" v-model="form.createUser"
                                  :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                                </el-autocomplete>
                              </div>
                            </el-form-item>
                          </el-col>
                          <el-col :span="4">
                            <el-form-item label="商品项目编码 ：">
                              <div style="display: flex;align-items: center;">
                                <el-input class="ml10" v-model="form.fileNumber" placeholder="输入编号"></el-input>
                              </div>
                            </el-form-item>
                          </el-col>
                          <el-col :span="6">
                            <el-form-item label="校验码 ：">
                              <div style="display: flex;">
                                <div style="display: flex;align-items: center;">
                                  <el-input class="ml10" style="width: 130px;" v-model="form.fileNumber"
                                    placeholder="输入编号"></el-input>
                                </div>
                                <el-button style="margin-left: 10px;" type="success" plain size='mini'>生成校验码</el-button>
                              </div>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-form>
                    </div>
                  </div>

                </div>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="产品标识发布日期：" required style="">
                      <el-date-picker v-model="form.createTime" type="date" placeholder="选择日期" style="width:200px;">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="标识载体（多选）：" required>
                      <el-select class="w300" placeholder="请选择" multiple v-model="biaoshizaitis" filterable>
                        <el-option v-for="(item, i) in biaoshizaiti" :key="i" :value="item.value" :label="item.label">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="是否与注册/备案产品标识一致：" required>
                  <el-select placeholder="请选择" v-model="form.createUser" filterable>
                    <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
                <div style="background: #F5F7FA;padding: 20px 10px;">
                  <el-row>
                    <el-col :span='12'>
                      <el-form-item label="是否有本体直接标识：" required>
                        <el-select placeholder="请选择" v-model="form.createUser" filterable>
                          <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                      <el-form-item class="" label="注册/备案本体标识：" required style="background: #F5F7FA; ">
                        <el-input class="w160" v-model="form.fileNumber" placeholder="输入" style="width: 90px;">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                      <el-form-item class="" label="本体产品标识与最小销售单元产品标识是否一致：" required style="background: #F5F7FA; ">
                        <el-select placeholder="请选择" v-model="form.createUser" filterable>
                          <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <!-- 以下是本体产品标识与最小销售单元产品标识是否一致，选择否后 显示的对本体产品标识的编码内容 -->
                  <div class="flex_center" style="justify-content: flex-start;">
                    <div style="font-weight: bold;font-size: 14px;color: #606366;">本体产品标识：</div>
                  </div>
                  <div style="border: 1px solid #C0C6CC;padding: 10px;margin-top: 10px;margin-bottom: 20px;">
                    <el-form size="small" label-position="top">
                      <el-row gutter='20'>
                        <el-col :span="4">
                          <el-form-item label="应用标识符（AI）：" style="" required>
                            <div style="display: flex;align-items: center;">
                              <el-select placeholder="请选择" v-model="forms.ppppp" filterable>
                                <el-option :value="0" label="01"></el-option>
                              </el-select>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4">
                          <el-form-item label="包装指示符号 ：" required>
                            <div style="display: flex;align-items: center;">
                              <el-select placeholder="请选择" v-model="form.createUser" filterable>
                                <el-option value="0" label="0"></el-option>
                              </el-select>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="医疗器械注册人/备案人识别代码 ：" required>
                            <div style="display: flex;align-items: center;">
                              <el-autocomplete class="inline-input" v-model="form.createUser"
                                :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                              </el-autocomplete>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4">
                          <el-form-item label="商品项目编码 ：" required>
                            <div style="display: flex;align-items: center;">
                              <el-input class="ml10" v-model="form.fileNumber" placeholder="输入编号"></el-input>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="校验码 ：" required>
                            <div style="display: flex;">
                              <div style="display: flex;align-items: center;">
                                <el-input class="ml10" style="width: 130px;" v-model="form.fileNumber"
                                  placeholder="输入编号"></el-input>
                              </div>
                              <el-button style="margin-left: 10px;" type="success" plain size='mini'>生成校验码</el-button>
                            </div>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                  </div>
                </div>
              </el-form>
            </div>









            <div class="f14 mb20 " style="margin-top: 40px;">产品基本信息</div>
            <div class="border" style="padding: 10px;">
              <el-form size="small">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="产品名称：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="商品名称：" required>
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="输入" style="width: 200px;">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="规格型号：" required>
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="输入" style="width:100px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否为包类/组套类产品：" required>
                      <el-date-picker v-model="form.createTime" type="date" placeholder="选择日期" style="width:200px;">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="产品描述：" required>
                  <el-input class="ml10" v-model="form.fileNumber" placeholder="输入" style="width:500px;"></el-input>
                </el-form-item>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="产品货号或编号：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="原器械目录代码：">
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="器械类别：" required>
                      <el-input class="ml10" readonly v-model="form.fileNumber" placeholder="数据带入" style="width:200px;">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="分类编码：" required>
                      <el-input class="ml10" readonly v-model="form.fileNumber" placeholder="数据带入" style="width:200px;">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="医疗器械注册人/备案人名称：" required>
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="输入" style="width:100px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="医疗器械注册人/备案人英文名称：" required>
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="输入" style="width:100px;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="社会统一信用代码：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="注册证编号或者备案凭证编号：">
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="输入" style="width: 100px;">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="医保编码：">
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="产品类别：">
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-form-item label="磁共振（MR）安全相关信息：" required="">
                  <el-select placeholder="请选择" v-model="form.createUser" filterable>
                    <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-row>
                  <el-col :span='12'>
                    <el-form-item label="是否标记为一次性使用：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label="最大使用重复次数：" required>
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="数据带入" style="width:200px;">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-form-item label="是否为无菌包装：" required>
                  <el-select placeholder="请选择" v-model="form.createUser" filterable>
                    <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-row>
                  <el-col :span='12'>
                    <el-form-item label="使用前是否需要进行灭菌：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label="灭菌的方式：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="医保耗材分类编码：">
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="输入" style="width: 200px;">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="品牌：">
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="输入" style="width: 200px;">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="其他信息的网址链接：">
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="输入" style="width: 200px;">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="退市日期：">
                      <el-date-picker v-model="form.createTime" type="date" placeholder="选择日期" style="width:200px;">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <div class="f14 mb20 " style="margin-top: 40px;">生产标识信息</div>
            <div class="border" style="padding: 10px;">
              <el-form size="small">
                <el-row>
                  <el-col :span='10'>
                    <el-form-item label="生产标识是否包含批号：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6'>
                    <el-form-item label="应用标识符（AI）：" required>
                      <el-input class="w100" v-model="form.fileNumber" placeholder="数据带入" />
                    </el-form-item>
                  </el-col>
                  <el-col :span='8'>
                    <el-form-item label="批号：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 2 -->
                <el-row>
                  <el-col :span='10'>
                    <el-form-item label="生产标识是否包含生产日期：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6'>
                    <el-form-item label="应用标识符（AI）：" required>
                      <el-input class="w100" v-model="form.fileNumber" placeholder="数据带入" />
                    </el-form-item>
                  </el-col>
                  <el-col :span='8'>
                    <el-form-item label="生产日期：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 3 -->
                <el-row>
                  <el-col :span='10'>
                    <el-form-item label="生产标识是否包含失效日期：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6'>
                    <el-form-item label="应用标识符（AI）：" required>
                      <el-input class="w100" v-model="form.fileNumber" placeholder="数据带入" />
                    </el-form-item>
                  </el-col>
                  <el-col :span='8'>
                    <el-form-item label="失效日期：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 4 -->
                <el-row>
                  <el-col :span='10'>
                    <el-form-item label="生产标识是否包含序列号：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='6'>
                    <el-form-item label="应用标识符（AI）：" required>
                      <el-input class="w100" v-model="form.fileNumber" placeholder="数据带入" style="width:200px;" />
                    </el-form-item>
                  </el-col>
                  <el-col :span='8'>
                    <el-form-item label="序列号：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-form>
            </div>

            <div class="f14 mb20" style="margin-top: 40px;">包装标识信息</div>
            <div class="border" style="padding: 10px;">
              <el-form size="small">
                <el-form-item label="产品包装级别：" required style="background: #F5F7FA;padding: 10px;margin-bottom: 0;">
                  <el-select placeholder="请选择" v-model="form.createUser" filterable>
                    <el-option value="0" label="一级包装"></el-option>
                    <el-option value="1" label="二级包装"></el-option>
                    <el-option value="2" label="三级包装"></el-option>
                  </el-select>
                </el-form-item>
                <!-- 一级包装的显示 -->
                <div>
                  <div class="flex_center" style="justify-content: flex-start;margin-top: 20px;">
                    <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                      <div class="deepgray_f">系统编号</div>
                      <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                    </el-popover>
                    <div style="font-weight: bold;font-size: 14px;color: #606366;margin-left: 10px;">包装产品标识：</div>
                  </div>
                  <el-form-item label="产品标识编码种类：">
                    <el-select placeholder="请选择" v-model="form.createUser" filterable>
                      <el-option :value="0" label="GTIN-13"></el-option>
                      <el-option :value="1" label="GTIN-14"></el-option>
                    </el-select>
                  </el-form-item>
                  <div style="border: 1px solid #C0C6CC;padding: 10px;margin-top: 10px;margin-bottom: 20px;">
                    <el-form size="small" label-position="top">
                      <el-row gutter='20'>
                        <el-col :span="4">
                          <el-form-item label="应用标识符（AI）：" style="">
                            <div style="display: flex;align-items: center;">
                              <el-select placeholder="请选择" v-model="forms.ppppp" filterable>
                                <el-option :value="0" label="01"></el-option>
                              </el-select>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4">
                          <el-form-item label="包装指示符号 ：">
                            <div style="display: flex;align-items: center;">
                              <el-select placeholder="请选择" v-model="form.createUser" filterable>
                                <el-option value="0" label="0"></el-option>
                              </el-select>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="医疗器械注册人/备案人识别代码 ：">
                            <div style="display: flex;align-items: center;">
                              <el-autocomplete class="inline-input" v-model="form.createUser"
                                :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                              </el-autocomplete>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="4">
                          <el-form-item label="商品项目编码 ：">
                            <div style="display: flex;align-items: center;">
                              <el-input class="ml10" v-model="form.fileNumber" placeholder="输入编号"></el-input>
                            </div>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="校验码 ：">
                            <div style="display: flex;">
                              <div style="display: flex;align-items: center;">
                                <el-input class="ml10" style="width: 130px;" v-model="form.fileNumber"
                                  placeholder="输入编号"></el-input>
                              </div>
                              <el-button style="margin-left: 10px;" type="success" plain size='mini'>生成校验码</el-button>
                            </div>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                  </div>
                </div>
                <!-- 2-3级包装的显示 -->
                <div>
                  <el-form-item label="包装内含小一级包装产品标识数量：" required>
                    <div class="w300" style="display: flex;align-items: center;">
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="输入编号"></el-input>
                      <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                        <div class="deepgray_f">系统编号</div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                    </div>
                  </el-form-item>
                  <el-form-item label="包装内含小一级包装产品标识是否一致：" required>
                    <div class="w300" style="display: flex;align-items: center;">
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option value="0" label="是"></el-option>
                        <el-option value="1" label="否"></el-option>
                      </el-select>
                    </div>
                  </el-form-item>
                  <div>
                    <div class="flex_center" style="justify-content: flex-start;margin-bottom: 10px;">
                      <el-popover placement="top-start" title="系统编号：" width="200" trigger="hover">
                        <div class="deepgray_f">系统编号</div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                      <div style="font-weight: bold;font-size: 14px;color: #606366;margin-left: 10px;">包装产品标识：</div>
                      <el-button type="primary" plain size='mini' icon="el-icon-plus">增加</el-button>
                    </div>
                    <el-form-item label="产品标识编码种类：">
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option :value="0" label="GTIN-13"></el-option>
                        <el-option :value="1" label="GTIN-14"></el-option>
                      </el-select>
                    </el-form-item>
                    <div style="border: 1px solid #C0C6CC;padding: 10px;margin-top: 10px;margin-bottom: 20px;">
                      <el-form size="small" label-position="top">
                        <el-row gutter='20'>
                          <el-col :span="4">
                            <el-form-item label="应用标识符（AI）：" style="">
                              <div style="display: flex;align-items: center;">
                                <el-select placeholder="请选择" v-model="forms.ppppp" filterable>
                                  <el-option :value="0" label="01"></el-option>
                                </el-select>
                              </div>
                            </el-form-item>
                          </el-col>
                          <el-col :span="4">
                            <el-form-item label="包装指示符号 ：">
                              <div style="display: flex;align-items: center;">
                                <el-select placeholder="请选择" v-model="form.createUser" filterable>
                                  <el-option value="0" label="0"></el-option>
                                </el-select>
                              </div>
                            </el-form-item>
                          </el-col>
                          <el-col :span="6">
                            <el-form-item label="医疗器械注册人/备案人识别代码 ：">
                              <div style="display: flex;align-items: center;">
                                <el-autocomplete class="inline-input" v-model="form.createUser"
                                  :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                                </el-autocomplete>
                              </div>
                            </el-form-item>
                          </el-col>
                          <el-col :span="4">
                            <el-form-item label="商品项目编码 ：">
                              <div style="display: flex;align-items: center;">
                                <el-input class="ml10" v-model="form.fileNumber" placeholder="输入编号"></el-input>
                              </div>
                            </el-form-item>
                          </el-col>
                          <el-col :span="6">
                            <el-form-item label="校验码 ：">
                              <div style="display: flex;">
                                <div style="display: flex;align-items: center;">
                                  <el-input class="ml10" style="width: 130px;" v-model="form.fileNumber"
                                    placeholder="输入编号"></el-input>
                                </div>
                                <el-button style="margin-left: 10px;" type="success" plain size='mini'>生成校验码</el-button>
                              </div>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-form>
                    </div>
                  </div>
                </div>
              </el-form>
            </div>

            <div class="f14 mb20" style="margin-top: 40px;">储存或操作信息</div>
            <div class="border" style="padding: 10px;">
              <el-form size="small">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="储存或操作条件：">
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="最低值：">
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="输入" style="width: 90px;"></el-input>
                      <el-popover placement="top-start" title="最低值：" width="200" trigger="hover">
                        <div class="deepgray_f">最低值</div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="最高值：">
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="输入" style="width:100px;"></el-input>
                      <el-popover placement="top-start" title="最高值：" width="200" trigger="hover">
                        <div class="deepgray_f">最高值</div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="计量单位：">
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="特殊储存或操作条件：">
                  <el-select placeholder="请选择" v-model="form.createUser" filterable>
                    <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>

            <div class="f14 mb20" style="margin-top: 40px;">临床使用尺寸信息</div>
            <div class="border" style="padding: 10px;">
              <el-form size="small">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="临床使用尺寸类型：">
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="尺寸值：">
                      <el-input class="ml10" v-model="form.fileNumber" placeholder="输入" style="width: 90px;"></el-input>
                      <el-popover placement="top-start" title="最低值：" width="200" trigger="hover">
                        <div class="deepgray_f">最低值</div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="尺寸单位：">
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="特殊尺寸说明：">
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <div class="f14 mb20" style="margin-top: 40px;">版本信息</div>
            <div class="border" style="padding: 10px;">
              <el-form size="small">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="主键编号：">
                      <el-input class="ml10" readonly v-model="form.fileNumber" placeholder="系统产生" style="width:160px;">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="公开的版本号：">
                      <el-input class="ml10" readonly v-model="form.fileNumber" placeholder="系统产生"
                        style="width: 160px;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="版本的发布时间：">
                      <el-input class="ml10" readonly v-model="form.fileNumber" placeholder="系统产生"
                        style="width: 160px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="版本的状态：">
                      <el-input class="ml10" readonly v-model="form.fileNumber" placeholder="系统产生"
                        style="width: 160px;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="变更备注：">
                  <el-input class="ml10" v-model="form.fileNumber" placeholder="请输入" style="width: 500px;"></el-input>
                </el-form-item>
              </el-form>
            </div>

            <div class="f14 mb20" style="margin-top: 40px;">企业联系信息</div>
            <div class="border" style="padding: 10px;">
              <el-form size="small">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="联系人邮箱：">
                      <el-input class="ml10" type="email" v-model="form.fileNumber" placeholder="请输入"
                        style="width:240px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系人电话：">
                      <el-input class="ml10" type="phone" v-model="form.fileNumber" placeholder="请输入"
                        style="width: 240px;"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="联系人传真：">
                  <el-input class="ml10" readonly v-model="form.fileNumber" placeholder="系统产生" style="width: 240px;">
                  </el-input>
                </el-form-item>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="管理部门：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="负责人：" required>
                      <el-select placeholder="请选择" v-model="form.createUser" filterable>
                        <el-option v-for="(item, i) in memberOption" :key="i" :value="item.id" :label="item.name">
                        </el-option>  
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="编制部门：">
                  <el-input class="ml10" readonly v-model="form.fileNumber" placeholder="系统产生" style="width: 500px;">
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <div style="margin-bottom: 10px; margin-top: 20px;">
              <div>
                <div class="mb20">
                  <span class="index_num success_bg">2</span>
                  <b class="f14">工作文件</b>
                </div>
                <div class="worktable mb20">
                  <table class="owntable" style="width: 100%;">
                    <tr>
                      <th class="">
                        <div class="flex_start">
                          <span class="red_f">*</span>
                          规范性操作文件
                          <i class="main_co el-icon-circle-plus-outline f16 pointer" style="margin-left: 4px;"
                            @click="addguifan(index)"></i>
                        </div>
                      </th>
                    </tr>
                    <tr v-if="form.guifanFileList.length == 0">
                      <td class="white_bg gray_f">添加的文件会显示在此处</td>
                    </tr>
                    <tr v-for="(item, i) in form.guifanFileList" :key="i">
                      <td class="white_bg">
                        <div class="flex_between">
                          <span class="main_co">{{ item.name }}.pdf</span>
                          <div class="flex_end">
                            <i class="el-icon-delete f16 error_f" @click="delguifan(index, i)"></i>
                            <el-button size="mini" class=" ml10">封面预览</el-button>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </table>

                  <table class="owntable" style="width: 100%;margin-top: 30px;">
                    <tr class="">
                      <th>
                        <div class="flex_start">
                          <span class="red_f">*</span>
                          记录文件
                          <i class="main_co el-icon-circle-plus-outline f16 pointer" style="margin-left: 4px;"
                            @click="addjilu(index)"></i>
                        </div>
                      </th>
                      <th class="">
                        <div class="flex_center">
                          记录流水编号
                          <el-radio :label="0" class="ml10">
                            使用系统编号
                            <el-popover placement="top-start" title="文件版本号规则：" width="240" trigger="hover">
                              <div class="mb10 deepgray_f">A0 ------------ 首版版本号</div>
                              <div class="deepgray_f">A1...A9 B1...B9 --------依次升版版本号</div>
                              <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                            </el-popover>
                          </el-radio>
                          <span class="warn_f">流水号复制到记录文件中</span>
                        </div>
                      </th>
                    </tr>
                    <tr v-if="form.jiluFileList.length == 0">
                      <td class="white_bg gray_f">添加的文件会显示在此处</td>
                      <td class="white_bg gray_f"></td>
                    </tr>
                    <tr v-for="(item, i) in form.jiluFileList" :key="i">
                      <td class="white_bg">
                        <div class="flex_between">
                          <span class="main_co">{{ item.name }}.doc</span>
                          <div>
                            <!-- <span class="gray_f">2021-09-27 15:29 编辑</span> -->
                            <el-button size="mini" class="ml10">封面预览</el-button>
                            <i class="el-icon-delete f16 error_f ml10" @click="deljilu(index, i)"></i>
                          </div>
                        </div>
                      </td>
                      <td>
                        <div class="flex_center">
                          <span class="">{{ item.serialNumber }}</span>
                          <el-button size="mini" class="ml10">复制</el-button>
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
                <div class="f12">
                  <span class="red_f">*</span>
                  记录保留期限（年）：
                  <el-input size="small" v-model="form.retentionPeriod" style="width: 160px;"></el-input>
                </div>
              </div>
            </div>
          </basic-container>
        </div>
      </el-col>
      <el-col :span="6" style="margin-top:10px;">
        <basic-container>
          <div class="main_title warn_f"><b>工作流信息</b></div>
          <el-divider></el-divider>
          <div class="mb20">
            <div class="mb20">
              <span class="index_num warn_bg">1</span>
              <b>工作流+对应签名人员</b>
            </div>
            <div class="mb20 flex_around pub_center deepgray_f steps">
              <div class="flex_center" style="align-items: baseline;">
                <div class="f20"><b>①</b></div>
                <div class="f16">编制</div>
              </div>
              <i class="el-icon-arrow-right f24 gray_f"></i>
              <div class="flex_center" style="align-items: baseline;">
                <div class="f20"><b>②</b></div>
                <div class="f16">复审</div>
              </div>
              <i class="el-icon-arrow-right f20 gray_f"></i>
              <template v-if="isOnlineReview">
                <div class="flex_center" style="align-items: baseline;">
                  <div class="f20"><b>③</b></div>
                  <div class="f16">评审</div>
                </div>
                <i class="el-icon-arrow-right f20 gray_f"></i>
              </template>
              <div class="flex_center" style="align-items: baseline;">
                <div class="f20">
                  <b>{{ isOnlineReview ? '④' : '③' }}</b>
                </div>
                <div class="f16">批准</div>
              </div>
            </div>
          </div>
          <div>
            <div class="mb20">
              <span class="index_num warn_bg">2</span>
              <b>签名人员</b>
            </div>
            <el-button class="mb20" size="mini" plain type="primary" @click="addSign()">增加记录责任人</el-button>

            <div class="f14">
              <div class="flex_start mb20">
                <div>编制人：</div>
                <div class="border deepgray_f ml10 flex_item">{{ userInfo.user_name }}</div>
              </div>
              <div class="flex_start mb20">
                <div>审核人：</div>
                <!-- <div class="border deepgray_f ml10 flex_item"> -->
                <el-select placeholder="请选择" v-model="shenhe.userId" size="small" ref="pizhunuser" filterable>
                  <el-option v-for="(item, i) in Alluser" :key="i" :value="item.value" :label="item.label"></el-option>
                </el-select>
                <!-- </div> -->
              </div>
              <div v-for="(item, i) in signList" :key="i" class="mb20 flex_between">
                <div class="flex_item">
                  <el-select v-model="item.userId" placeholder="请输入/选择记录责任人" size="mini" class="mb20"
                    style="width: 100%;">
                    <el-option v-for="(item, i) in Alluser" :key="i" :value="item.value" :label="item.label">
                    </el-option>
                  </el-select>
                  <!-- <div class="flex_between">
                    <div>指定签名文件：</div>
                    <el-select placeholder="请选择" size="mini" class=" flex_item">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </div> -->
                </div>

                <i class="el-icon-delete error_f f18 pointer ml10" @click="delSign(i)"></i>
              </div>
              <div class="flex_start mb20">
                <div>批准人：</div>
                <!-- <div class="border deepgray_f ml10 flex_item"> -->
                <el-select placeholder="请选择" v-model="pizhun.userId" size="small" ref="pizhunuser" filterable>
                  <el-option v-for="(item, i) in Alluser" :key="i" :value="item.value" :label="item.label"></el-option>
                </el-select>
                <!-- </div> -->
              </div>
            </div>
          </div>
        </basic-container>
      </el-col>
    </el-row>
    <chooseTemplate ref="template"></chooseTemplate>
    <steps ref="steps" @close="success()" :nowdate="nowdate"></steps>
    <confirm ref="confirm" @close="save()" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"
      :systemGuifanFilesProcessList="systemGuifanFilesProcessList"></confirm>
    <showhistory ref="showhistory" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>

    <!-- 选择文件 -->
    <el-dialog :title="dialogTitle" append-to-body :visible.sync="showAction" width="345px">
      <div style="max-height:400px;overflow-y: scroll;" v-if="currentActive == 1">
        <el-tree :data="alljnluList" show-checkbox node-key="id" @check="checkChange"
          :default-checked-keys="defaultCheckedKeys" ref="treeMenu" highlight-current :props="{
            label: 'name',
            value: 'id'
          }"></el-tree>
      </div>
      <div style="max-height:400px;overflow-y: scroll;" v-if="currentActive == 0">
        <el-tree :data="allguifanList" show-checkbox node-key="id" @check="checkChange"
          :default-checked-keys="defaultCheckedKeys" ref="treeMenu" highlight-current :props="{
            label: 'name',
            value: 'id'
          }"></el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAction = false">取 消</el-button>
        <el-button type="primary" @click="showAction = false">确 定</el-button>
      </span>
    </el-dialog>
  </detailbox>
</template>

<script>
  // const moment = require('moment');
  import confirm from './confirm.vue';
  import {
    getdeptlist,
    getuserByDept,
    getAlluser,
    getGangweiList,
    getspecialtyList,
    getnatureList
  } from '@/api/myapi/common';
  import {
    savefiles,
    getguifanDetail,
    update,
    getguifanList
  } from '@/api/myapi/tixiwenjian';
  export default {
    props: {
      detailId: ''
    },
    components: {
      confirm
    },
    data() {
      return {
        biaoshizaitis: [],
        GTIN: 13,
        forms: {
          ppppp: 0
        },
        type: 0,
        system: 'productcleanprocess',
        deptOption: [],
        memberOption: [],
        checked: false,
        showpreview: false,
        tableData: [],
        developmentplanList: [],
        formList: [{
          productName: '', //名称
          productNumber: '', //编号
          productSku: '', //	规格型号
          sampleQty: '', //留样数量
          sampleDate: '', // 留样日期
          examineDate: '2021-04-02', //  检验日期
          invalidDate: '',
          number: '',
          batchNumber: '',
          cleanType: 0,
          numberType: 1,
          manageUserId: '',
          manageUserName: '',
          createDeptName: '',
          manageDeptId: '',
          manageDeptName: '',
          retentionPeriod: '', // 记录保留期限
          guifanFilesIds: '',
          jiluFilesIds: '',
          deviceList: [], //   设备列表
          outsourcingList: [], //外包服务列表
          productList: [], //原材料列表
          softwareList: [], //计算机应用软件列表
          jiluFileList: [],
          guifanFileList: []
        },
        {
          productName: '', //名称
          productNumber: '', //编号
          productSku: '', //	规格型号
          sampleQty: '', //留样数量
          sampleDate: '', // 留样日期
          examineDate: '2021-04-02', //  检验日期
          invalidDate: '',
          number: '',
          batchNumber: '',
          cleanType: 0,
          numberType: 1,
          manageUserId: '',
          manageUserName: '',
          createDeptName: '',
          manageDeptId: '',
          manageDeptName: '',
          retentionPeriod: '', // 记录保留期限
          guifanFilesIds: '',
          jiluFilesIds: '',
          deviceList: [], //   设备列表
          outsourcingList: [], //外包服务列表
          productList: [], //原材料列表
          softwareList: [], //计算机应用软件列表
          jiluFileList: [],
          guifanFileList: []
        }
        ],
        chooseIndex: 0,
        currentActive: 0,
        showAction: false,
        dialogTitle: '规范文件',
        allguifanList: [],
        alljnluList: [],
        defaultCheckedKeys: [],
        Alluser: [],
        isOnlineReview: false,
        signList: [],
        oldguifanFilesProcessRecordList: [],
        guifanFilesProcessRecordList: [],
        systemGuifanFilesProcessList: [],
        pizhun: {
          deptId: '',
          deptName: '',
          userId: '',
          userName: ''
        }, //批准
        shenhe: {
          deptId: '',
          deptName: '',
          userId: '',
          userName: ''
        }, //审核
        restaurants: [],
        biaoshizaiti: [{
            label: '一维码',
            value: 0,
          },
          {
            label: '二维码',
            value: 1,
          },
          {
            label: 'FRFID',
            value: 2,
          },
          {
            label: '其他',
            value: 3,
          },
        ]
      };
    },
    created() {
      if (this.detailId) {
        this.type = 1;
        this.getDetail();
      }
      this.getdeptlist();
      this.getGuFanList();
      this.getJuLuList();
      
      this.getdevelopmentplanList();
      // this.restaurants.push(
      // {
      //   value:'fsdaiofhso'
      // })
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      },
      getDetail() {
        getguifanDetail({
            id: this.detailId
          },
          this.system
        ).then(({
          data
        }) => {
          console.log(data);
          if (data.success) {
            this.formList = [data.data];
            data.data.isOnlineReview == 1 ? (this.isOnlineReview = true) : (this.isOnlineReview = false);
            this.oldguifanFilesProcessRecordList = data.data.processRecordList;
            data.data.processRecordList.forEach(item => {
              if (item.type == 1) {
                this.shenhe.userId = item.userId;
                this.shenhe.deptId = item.deptId;
              } else if (item.type == 2) {
                this.tableData.push({
                  deptName: item.createDeptName,
                  userName: item.createUserName,
                  userId: item.userId,
                  deptId: item.deptId
                });
              } else if (item.type == 4) {
                this.pizhun.userId = item.userId;
              }
            });
          }
        });
      },
      close() {
        this.$emit('close');
      },
      // 所有人员
      getAlluser() {
        getAlluser({
          current: 1,
          size: 100000
        }).then(({
          data
        }) => {
          if (data && data.success) {
            data.data.records.forEach(item => {
              this.Alluser.push({
                label: `(${item.deptName})${item.name}`,
                value: item.id,
                deptId: item.deptId
              });
            });
          }
        });
      },
      //  采购计划
      getdevelopmentplanList() {
        getguifanList({
            current: 1,
            size: 10000,
            processStatus: 7
          },
          'purchaseplanprocess'
        ).then(({
          data
        }) => {
          console.log(data);
          if (data && data.success) {
            this.developmentplanList = data.data.records;
          }
        });
      },
      // 部门列表
      getdeptlist() {
        // this.deptOption = this.$store.state.common.deptOption;
        // return;
        getdeptlist({}).then(({
          data
        }) => {
          if (data && data.success) {
            this.deptOption = data.data;
          }
        });
      },
      getMemberOption(val, index) {
        let dept = this.$refs.newdept[index].getCheckedNodes();
        this.formList[index].manageDeptName = dept[0].label;
        this.formList[index].manageDeptId = dept[0].value;
        this.formList[index].manageUserId = '';
        this.formList[index].manageUserName = '';
        getuserByDept({
          deptId: val
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.memberOption = data.data;
          }
        });
      },
      getPlanNumber(id, index) {
        let nodes = this.$refs.planNumber[index].getCheckedNodes();
        console.log(nodes);
        // this.formList[index].manageDeptName = dept[0].label;
        // this.formList[index].manageDeptId = dept[0].value;
      },
      addItem(index) {
        let item = this.formList[index];
        if (item.cleanType == 0) {
          this.formList[index].deviceList.push({});
        } else if (item.cleanType == 1) {
          this.formList[index].deviceList.push({});
        } else if (item.cleanType == 2) {
          this.formList[index].outsourcingList.push({});
        } else {
          this.formList[index].softwareList.push({});
        }
      },
      delItem(index, i) {
        let item = this.formList[index];
        if (item.cleanType == 0) {
          this.formList[index].productList.splice(i, 1);
        } else if (item.cleanType == 1) {
          this.formList[index].deviceList.splice(i, 1);
        } else if (item.cleanType == 2) {
          this.formList[index].outsourcingList.splice(i, 1);
        } else {
          this.formList[index].softwareList.splice(i, 1);
        }
      },
      // 获取规范文件
      getGuFanList() {
        getguifanList({
            current: 1,
            size: 10000,
            processStatus: 7
          },
          'systemguifanfilesprocess'
        ).then(({
          data
        }) => {
          if (data.code == 200) {
            this.allguifanList = data.data.records;
          }
        });
      },
      // 获取记录文件
      getJuLuList() {
        getguifanList({
            current: 1,
            size: 10000,
            processStatus: 7
          },
          'systemjilufilesprocess'
        ).then(({
          data
        }) => {
          if (data.code == 200) {
            console.log(data);
            this.alljnluList = data.data.records;
          }
        });
      },
      // 发放的文件
      addguifan(index) {
        console.log(index);
        this.dialogTitle = '规范文件';
        this.currentActive = 0;
        this.chooseIndex = index;
        this.showAction = true;
        // this.guifanList.push({});
      },
      delguifan(index, i) {
        this.formList[index].guifanFileList.splice(i, 1);
      },
      // 发放的文件
      addjilu(index) {
        this.dialogTitle = '记录文件';
        this.chooseIndex = index;
        this.currentActive = 1;
        this.showAction = true;
      },
      deljilu(index, i) {
        this.formList[index].jiluFileList.splice(i, 1);
      },
      checkChange() {
        let fileList = this.$refs.treeMenu.getCheckedNodes();
        let index = this.chooseIndex;
        if (this.currentActive == 0) {
          this.formList[index].guifanFileList = fileList;
          this.formList[index].guifanFilesIds = fileList.map(item => item.id).join(',');
        } else {
          this.formList[index].jiluFileList = fileList;
          this.formList[index].jiluFilesIds = fileList.map(item => item.id).join(',');
        }
      },
      submit() {
        let systemGuifanFilesProcessList = [];
        let guifanFilesProcessRecordList = [];
        guifanFilesProcessRecordList.push({
          userId: this.userInfo.user_id,
          userName: this.userInfo.user_name,
          type: 0
        });
        if (!this.shenhe.userId) {
          this.$message.error('请选择审核人员');
          return;
        }
        let shenhe = this.Alluser.find(item => item.value == this.shenhe.userId);
        let pizhun = this.Alluser.find(item => item.value == this.pizhun.userId);
        guifanFilesProcessRecordList.push({
          userId: this.shenhe.userId,
          type: 1,
          userName: shenhe.label
        });
        if (!this.pizhun.userId) {
          this.$message.error('请选择批准人员');
          return;
        }
        if (this.isOnlineReview) {
          this.tableData.forEach(item => {
            guifanFilesProcessRecordList.push({
              userId: item.userId,
              userName: item.userName,
              type: 2
            });
          });
        }
        guifanFilesProcessRecordList.push({
          userId: this.pizhun.userId,
          type: 4,
          userName: pizhun.label
        });
        for (let i = 0; i < this.formList.length; i++) {
          let item = this.formList[i];
          let arr = [{
              value: item.number,
              tips: '请补充产品清洁管理编号'
            },
            {
              value: item.batchNumber,
              tips: '请选择生产批号'
            },
            {
              value: item.cleanType != 0 ? item.productName : true,
              tips: '请选择名称'
            },
            {
              value: item.cleanType != 0 ? item.productSku : true,
              tips: '请选择规格型号'
            },
            {
              value: item.cleanType != 0 ? item.productNumber : true,
              tips: '请选择编号'
            },
            {
              value: item.manageDeptId,
              tips: '请选择管理部门'
            },
            {
              value: item.manageUserId,
              tips: '请选择负责人'
            },
            {
              value: item.jiluFilesIds,
              tips: '请添加记录文件'
            },
            {
              value: item.retentionPeriod,
              tips: '请输入记录保留期限'
            }
          ];
          for (let j = 0; j < arr.length; j++) {
            if (!arr[j].value) {
              this.$message.error(arr[j].tips);
              return;
            }
          }
          item.createDeptName = this.userInfo.deptName;
          item.createUserName = this.userInfo.user_name;
          item.createUserId = this.userInfo.user_id;
          item.createDeptId = this.userInfo.dept_id;
          systemGuifanFilesProcessList.push({
            ...item,
            // depts: item.depts.join(','),
            processRecordList: guifanFilesProcessRecordList
          });
        }
        this.systemGuifanFilesProcessList = systemGuifanFilesProcessList;
        this.guifanFilesProcessRecordList = guifanFilesProcessRecordList;
        console.log(this.systemGuifanFilesProcessList);
        console.log(this.guifanFilesProcessRecordList);
        this.openDialg('confirm');
      },
      // 保存
      save() {
        if (this.detailId) {
          console.log(JSON.stringify(this.systemGuifanFilesProcessList));
          update(this.systemGuifanFilesProcessList, this.system).then(({
            data
          }) => {
            if (data.success) {
              this.$message.success('提交成功');
              this.nowdate = this.dateFormat(new Date());
              this.openDialg('steps');
            }
          });
        } else {
          // console.log(this.systemGuifanFilesProcessList)
          savefiles(this.systemGuifanFilesProcessList, this.system).then(({
            data
          }) => {
            if (data.success) {
              this.$message.success('提交成功');
              this.nowdate = this.dateFormat(new Date());
              this.openDialg('steps');
            }
          });
        }
      },
      success() {
        this.$emit('success');
      },
      // 发放的文件
      addFile() {
        this.formList.push({
          fileType: 1,
          isUser: 0,
          manageUserId: '',
          manageUserName: '',
          createDeptName: '',
          manageDeptId: '',
          manageDeptName: '',
          retentionPeriod: '', // 记录保留期限
          guifanFilesIds: '',
          jiluFilesIds: '',
          jiluFileList: [],
          guifanFileList: [],
          skuList: [],
          deviceList: []
        });
		let index=this.formList.length-1;
		setTimeout(()=>{
			let document=window.parent.document.getElementById(`item${index}`);
			document.scrollIntoView({behavior:'smooth'});
		},100)
      },
      delFile(i) {
        console.log(i);
        this.formList.splice(i, 1);
      },
      // 签名
      addSign() {
        this.isOnlineReview = true;
        this.signList.push({});
      },
      delSign(i) {
        this.signList.splice(i, 1);
        if (this.signList.length == 0) this.isOnlineReview = false;
      }
    }
  };
</script>

<style scoped="scoped" lang="scss">
  .btn_ {
    width: 90px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #EBF6EE;
    border: 1px solid #36A759;
    opacity: 1;
    border-radius: 3px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 14px;
    color: #36A759 !important;
  }

  .btnbox {
    border: 1px solid #a3cffd;
    opacity: 1;
    border-radius: 3px 0px 0px 3px;
  }

  .btnleft {
    padding: 0 10px;
  }

  .btnright {
    border-left: 1px solid #a3cffd;
    padding: 0 10px;
    line-height: 32px;
  }

  .border {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    line-height: 32px;
    padding: 0 10px;
  }

  .preview {
    padding: 10px;
    background-color: #f0f2f5;
    margin-top: 20px;
    margin-left: 10px;
  }

  .preview .warn_f {
    background-color: #fbf4e0;
    border: 1px solid #f3dea4;
    line-height: 20px;
    padding: 0 4px;
    margin: 20px 0 10px;
  }

  .preview .tem {
    width: 377px;
    height: 512px;
  }

  .preview.bigpreview {
    background-color: #ffffff;
  }

  .preview.bigpreview .tem {
    width: 510px;
    height: 693px;
  }

  .error {
    background-color: #fceeec;
    border: 1px solid #f9dcd9;
    padding: 6px 10px;
    border-radius: 2px;
  }

  div::deep .el-checkbox.is-bordered {
    height: 32px;
    padding: 5px 10px;
  }

  .fileBox {
    position: relative;
    padding: 20px 10px 1px;
    border: 1px dashed #e4e8ed;

    .del {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }

  .worktable {

    td,
    th {
      line-height: 28px;
    }
  }

  .steps {
    .f16 {
      margin-left: 6px;
    }

    .flex_center {
      margin-bottom: 7px;
    }
  }

  .btnbox {
    border: 1px solid #a3cffd;
    opacity: 1;
    border-radius: 3px 0px 0px 3px;
  }

  .btnleft {
    padding: 0 10px;
  }

  .btnright {
    border-left: 1px solid #a3cffd;
    padding: 0 10px;
    line-height: 32px;
  }

  .border {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    line-height: 32px;
    padding: 0 10px;
  }

  .preview {
    padding: 10px;
    background-color: #f0f2f5;
    margin-top: 20px;
    margin-left: 10px;
  }

  .preview .warn_f {
    background-color: #fbf4e0;
    border: 1px solid #f3dea4;
    line-height: 20px;
    padding: 0 4px;
    margin: 20px 0 10px;
  }

  .preview .tem {
    width: 377px;
    height: 512px;
  }

  .preview.bigpreview {
    background-color: #ffffff;
  }

  .preview.bigpreview .tem {
    width: 510px;
    height: 693px;
  }

  .error {
    background-color: #fceeec;
    border: 1px solid #f9dcd9;
    padding: 6px 10px;
    border-radius: 2px;
  }

  div::deep .el-checkbox.is-bordered {
    height: 32px;
    padding: 5px 10px;
  }

  .jobfile {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

  .jobLeft {
    width: 34%;
  }

  .leftTitle {
    height: 48px;
    background: #f5f7fa;
    border: 1px solid #ebf0f5;
    opacity: 1;
    line-height: 48px;
    border-radius: 0px;
    padding: 0 15px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #303133;
    opacity: 1;
  }

  .leftList {
    height: 98px;
    background: #ffffff;
    border: 1px solid #ebf0f5;
    opacity: 1;
    line-height: 95px;
    border-radius: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 15px;
  }

  .cenList {
    height: 48px;
    background: #ffffff;
    border: 1px solid #ebf0f5;
    opacity: 1;
    line-height: 48px;
    padding: 0 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0px;
  }

  .fileBtn {
    margin-left: auto;
    margin-right: 10px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 16px;
    color: #909499;
    opacity: 1;
  }

  .leftBtn {
    margin-left: auto;
    margin-right: 10px;
  }

  .leftText {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 16px;
    color: #606366;
    opacity: 1;
  }

  .reviewTitle {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 0px;
    color: #606366;
    opacity: 1;
    margin-top: 30px;
  }

  .addReview {
    width: 74px;
    height: 32px;
    margin: 0 20px;
    background: #e6f1fc;
    border: 1px solid #a3cffd;
    opacity: 1;
    border-radius: 3px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 14px;
    color: #126bc9;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .reviewText {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 18px;
    color: #909499;
    opacity: 1;
  }

  .reviewList {
    background: #ffffff;
    border: 1px dashed #e4e8ed;
    opacity: 1;
    border-radius: 0px;
    padding: 20px;
  }
</style>
